<template>
  <view :style="{ paddingTop: systemBarHeight + 'px' , backgroundImage: 'url('+baseUrl+'/admin/sys-file/local/4a5794b801a849eabfc18610ae083f9b.jpg)'}" class="v1">
    <view class="content">
      <!-- v2父容器  子view使用绝对布局 -->
      <view class="v2">
        

        <view class="dltext" style="width: 100%; height: 92rpx; display: block; box-sizing: border-box; left: 0rpx; top: -2rpx">
          智能多肉繁育监测
        </view>

        <!-- 手机号 -->
        <view class="phoneCs">
          <input v-model="username" placeholder="请输入账号" type="text" />
        </view>

        <!-- 密码 -->
        <view class="passwordCs">
          <input v-model="password" placeholder="请输入密码" type="password" />
        </view>

        <!-- 登录按钮 -->
        <view class="denglu">
          <button class="loginhome"  @click="goIndex">登录</button>
          <button class="register" @click="gotoRegister(item)">立即注册</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { login } from "@/api/login/login";
import { LocalStorage } from "@/utils/storage";
import {API_BASE_URL} from "@/env_config.js"
import checkTokenMethods from "@/utils/checkTokenUtil"
const baseUrl=API_BASE_URL
/**
 * 计算顶部到导航栏的距离
 */
const systemBarHeight = ref(0);
const getSysteminfo = () => {
  uni.getSystemInfo({
    success: (res) => {
      console.log(res.statusBarHeight);
      systemBarHeight.value = res.statusBarHeight;
    },
  });
};
getSysteminfo();

// 定义变量来存储输入框的值
const username = ref("");
const password = ref("");

/**
 * 点击登录，登录事件
 */
function goIndex() {
  // 获取输入框的值
  const loginData = {
    username: username.value,
    password: password.value,
  };

  // 调试：打印 loginData
  console.log("登录数据：", loginData);

  // 调用登录接口
  login(loginData)
    .then((res) => {
      console.log("测试登录", res);
	  if(res.data && res.data.access_token){
		  // 存储token 信息
		  LocalStorage.set("token", res.data.access_token);
		  LocalStorage.set("refresh_token", res.data.refresh_token);
		  uni.showToast({
		    title: "登录成功",
		  });
		  
		  console.log("测试getApp",getApp().globalData)
		  
		  // 登录呈贡开启token刷新
		  checkTokenMethods.refreshToken(getApp())
		  
		  // 登录成功后跳转到首页
		  uni.reLaunch({
		    url: "/pages/home/home",
		  });
		  return;
	  }
	  
	  uni.showToast({
	  	 title:res.data.msg
	  })
      
    })
    .catch((err) => {
      uni.showToast({
        title: err?.msg || "系统异常请联系管理员",
      });
    });
}

/**
 * 页面跳转到注册页面
 */
function gotoRegister(item) {
  uni.navigateTo({
    url: "/pages/register/register",
  });
}
</script>

<style lang="scss">
/* 最大的父元素 */
.v1 {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  // background-image: url("http://222.19.236.139:8889/api/admin/sys-file/local/4a5794b801a849eabfc18610ae083f9b.jpg"); /* 背景图片路径 */
  background-size: cover; /* 背景图片覆盖整个区域 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}

.content {
  position: relative;
  z-index: 1; /* 确保内容在背景图片上方 */
  margin-top: 140px;
}

/* 白色区域 */
.v1 .v2 {
  position: relative;
  margin-top: 150rpx;
  left: 50rpx;
  width: 545rpx;
  height: 600rpx;
  // background-color: white;
  // border-radius: 50rpx;
  // box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* 图片 logo */
.v1 .v2 .logo {
  position: absolute;
  top: -100rpx; /* 调整 logo 的位置 */
  left: 50%;
  transform: translateX(-50%); /* 居中对齐 */
}

/* 白色区域内的登录文本 */
.v1 .v2 .dltext {
  margin-top: 50rpx;
  position: absolute;
  margin-left: 50rpx;
  width: 150rpx;
  height: 100rpx;
  font-size: 60rpx;
  font-family: Helvetica;
  color: #000000;
  line-height: 100rpx;
  letter-spacing: 2rpx;
}

/* 手机图片+输入框+下划线的父容器view */
.v1 .v2 .phoneCs {
  margin-top: 200rpx;
  margin-left: 25rpx;
  position: absolute;
  display: flex;
  width: 600rpx;
  height: 90rpx;
  background-color: rgb(250, 248, 248);
  border-radius: 50rpx;
}

/* 手机号输入框 */
.v1 .v2 .phoneCs input {
  width: 400rpx;
  font-size: 30rpx;
  margin-top: 25rpx;
  margin-left: 30rpx;
}

/* 密码图标+输入框+小眼睛图标+下划线父容器view */
.v1 .v2 .passwordCs {
  margin-top: 350rpx;
  margin-left: 25rpx;
  position: absolute;
  display: flex;
  width: 600rpx;
  height: 90rpx;
  border-radius: 50rpx;
  background-color: rgb(250, 248, 248);
}

/* 密码输入框 */
.v1 .v2 .passwordCs input {
  width: 400rpx;
  font-size: 30rpx;
  margin-top: 25rpx;
  margin-left: 30rpx;
}

/* 登录按钮容器view */
.v1 .v2 .denglu {
  width: 600rpx;
  height: 80rpx;
  position: absolute;
  margin-top: 515rpx;
  margin-left: 25rpx;
}

/* 登录按钮 */
.v1 .v2 .denglu button {
  padding: 0rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  width: 100%;
  height: 100%;
  border-radius: 50rpx;
}

.loginhome{
	background-color: #537a52;
}

.register {
  margin: 20rpx 0;
  color: #40693a ;  //#537a52
}
</style>